<template>
  <el-container class="goods-stock">
	<el-header>
		<el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane :label="item.label" :name="item.value" v-for="item in tabList" :key="item.value"/>
		</el-tabs>
	</el-header>
	<log  v-if="state.activeName== 'log'"/>
	<collect  v-if="state.activeName== 'collect'" @modalCallBack="modalCallBack"/>
	<setting  v-if="state.activeName== 'setting'"/>
    <el-footer class="sa-footer--submit">
      <el-button @click="confirm">关闭</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { cloneDeep } from 'lodash';
  import { onMounted, reactive, ref, unref } from 'vue';
  import log from './components/log.vue';
  import collect from './components/collect.vue';
  import setting from './components/setting.vue';
  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const state = reactive({
	activeName: '',
  });
  const tabList = [
	{ value: 'log', label: '铺货记录' },
	{ value: 'collect', label: '收藏夹' },
	{ value: 'setting', label: '铺货设置' },
  ]
  async function confirm() {
	emit('modalCallBack', { event: 'confirm'});
  }
  function modalCallBack(data) {
	  state.activeName = data.type;
	}
	function handleClick(e) {
		props.modal.params.title = e.props.label;
  }
  onMounted(() => {
	state.activeName = props.modal.params?.type || 'log';
	let title = tabList.find(item => item.value == state.activeName).label || '';
	if(title){
		props.modal.params.title = title;
	}
  });
</script>
<style lang="scss" scoped>

</style>
